<template>
  <div class="order-item-wrapper">
    <div class="bg">
      <div class="order-number">
        <div class="left">
          <span>订单号</span>
          <span>{{ data.orderNumber }}</span>
        </div>
        <div class="right">
          <span>{{ data.time }}</span>
        </div>
      </div>
      <div class="order-details">
        <div class="order-car">
          <img :src="data.image" alt="" />
          <div class="name-model">
            <div class="title">
              <span class="name">{{ data.name }}</span>
              <span class="model">{{ data.model }}</span>
            </div>
            <div class="state" v-if="data.type === 'progress'">
              {{ data.finish ? "已支付" : "待支付" }}
            </div>
            <div class="state" v-else-if="data.type === 'history'">
              {{ data.cancel ? "已完成" : "已取消" }}
            </div>
          </div>
        </div>
        <div class="get-car">
          <div class="left">取车</div>
          <div class="right">
            <div class="time">
              {{ $store.state.address.date.get.day }}
              {{ $store.state.address.date.get.hour }}
            </div>
            <div class="address">
              {{ $store.state.address.address.city }}市{{
                $store.state.address.address.area
              }}
            </div>
          </div>
        </div>
        <div class="also-car">
          <div class="left">还车</div>
          <div class="right">
            <div class="time">
              {{ $store.state.address.date.also.day }}
              {{ $store.state.address.date.also.hour }}
            </div>
            <div class="address">
              {{ $store.state.address.address.city }}市{{
                $store.state.address.address.area
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="order-footer">
        <div class="left">
          <span>费用明细</span>
          <i class="iconfont icon-right"></i>
        </div>
        <slot>
          <div class="state">{{ data.cancel ? "已完成" : "已取消" }}</div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderItem",
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  created() {
    console.log(this.data);
  },
};
</script>

<style lang="scss" scoped>
.order-item-wrapper {
  margin-top: 15px;
  width: 345px;
  padding: 0 15px;
  background: rgb(255, 255, 255);
  .bg {
    .order-number {
      width: 100%;
      height: 53px;
      border-bottom: 1px solid rgb(235, 234, 234);
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #828282;
      font-size: 10px;
    }
    .order-details {
      .order-car {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 124px;
          height: 80px;
          margin: 8px 15px 0;
        }
        .name-model {
          width: 50%;
          .title {
            font-size: 15px;
            .name {
              margin-right: 5px;
            }
          }
          .state {
            margin-top: 5px;
            font-size: 12px;
            color: #ea2027;
          }
        }
      }
      .get-car {
        display: flex;
        align-items: center;
        font-size: 15px;
        margin-bottom: 20px;
        .left {
          color: rgb(223, 37, 37);
          width: 50px;
        }
        .right {
          color: #282828;
          margin-top: 2px;
        }
      }
      .also-car {
        display: flex;
        align-items: center;
        font-size: 15px;
        .left {
          color: rgb(223, 37, 37);
          width: 50px;
        }
        .right {
          color: #282828;
          margin-top: 2px;
        }
      }
    }
    .order-footer {
      width: 100%;
      height: 50px;
      border-top: 1px solid rgb(230, 229, 229);
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 80px;
        font-size: 14px;
        .iconfont {
          font-size: 14px;
          margin-left: 5px;
        }
      }
      .state {
        color: #bababa;
        font-size: 14px;
      }
      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          width: 88px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 14px;
        }
        .cancel {
          color: #cb2a1e;
          border: 1px solid #cb2a1e;
        }
        .pay {
          color: white;
          background-color: #cb2a1e;
          margin-left: 5px;
          border: 1px solid #cb2a1e;
        }
      }
    }
  }
}
</style>